<!--
 * @Description: 秒杀排期列表（修改版）
 * @Author: liyujie
 * @Date: 2021/8/24
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/8/24
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!--头部时间选择-->
            <div class="header-wrapper">
                <div class="day-view">
                    <div class="icon-view icon-left">
                        <div
                            class="icon"
                            @click="handleDayTransform('prev')"
                        >
                            <i class="el-icon-arrow-left"/>
                        </div>
                        <div class="shadow"/>
                    </div>
                    <div
                        class="scroll-view"
                        ref="tabsWrapper"
                    >
                        <div
                            class="tabs-view"
                            :class="{'init': isInit}"
                            ref="tabs"
                        >
                            <div
                                class="day-item"
                                v-for="(item, index) in day_list"
                                :key="item.day"
                                @click="handleChangeDay(item, index)"
                            >
                                <div class="day-item__inner">
                                    {{ item.day_time * 1000 | dateFormatter('yyyy-MM-dd') }}
                                </div>
                                <div
                                    class="status-dot"
                                    :class="item.class_name"
                                    v-if="item.exist_activity"
                                />
                            </div>
                            <div
                                class="scroll-bar"
                                :style="{left: `${nowIndex * 139}px`}"
                            />
                        </div>
                    </div>
                    <div class="icon-view icon-right">
                        <div
                            class="icon"
                            @click="handleDayTransform('next')"
                        >
                            <i class="el-icon-arrow-right"/>
                        </div>
                        <div class="shadow"/>
                    </div>
                </div>
                <div class="header-right">
                    <el-popover
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        content="当场的结束时间需和下一场的开始时间一样"
                    >
                        <el-button
                            slot="reference"
                            type="primary"
                            size="medium"
                            @click="handleAddSeckillTime"
                        >
                            创建秒杀时间
                            <i
                                class="el-icon-info"
                                style="margin-left: 4px"
                            />
                        </el-button>
                    </el-popover>
                </div>
            </div>
            <!--秒杀时间选择-->
            <div
                class="time-wrapper"
                v-if="time_list.length"
            >
                <div class="time-title">秒杀时间段：</div>
                <div
                    class="time-item"
                    :class="time_no === item.time_no ? 'active' : ''"
                    v-for="item in time_list"
                    :key="item.time_no"
                    @mouseenter="item.show_close = true"
                    @mouseleave="item.show_close = false"
                    @click="handleChangeTime(item)"
                >
                    <div class="time-label">{{ item.label }}</div>
                    <div
                        class="edit-icon"
                        @click.stop="handleEditTime(item)"
                    >
                        <i class="el-icon-edit"/>
                    </div>
                    <div
                        class="delete-icon"
                        v-show="item.show_close"
                        @click.stop="handleDeleteTime(item)"
                    >
                        <i class="el-icon-circle-close"/>
                    </div>
                </div>
                <div class="btn-group">
                    <el-button
                        type="primary"
                        size="medium"
                        @click="handleEditGoods('', 'add', time_no)"
                    >
                        添加商品
                    </el-button>
                    <el-button
                        type="primary"
                        size="medium"
                        @click="$refs.goodsSelect.show(2)"
                    >
                        批量添加商品
                    </el-button>
                </div>
            </div>
            <!--表格-->
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                    ref="table"
                    class="data-table"
                    v-loading="tableLoading"
                >
                    <el-table-column width="24"/>
                    <el-table-column
                        prop="goods_info"
                        label="商品信息"
                        width="280"
                        fixed="left"
                    >
                        <template slot-scope="scope">
                            <div class="sec-goods-info">
                                <div class="sec-goods-cover">
                                    <img
                                        :src="scope.row.goods_cover"
                                        alt=""
                                    >
                                </div>
                                <div class="sec-goods-content">
                                    <el-tooltip
                                        effect="dark"
                                        :content="scope.row.goods_title"
                                        placement="top"
                                        :disabled="scope.row.goods_title.length < 23"
                                    >
                                        <div class="sec-goods-title">
                                            {{ scope.row.goods_title }}
                                        </div>
                                    </el-tooltip>
                                    <div class="goods-type">
                                        商品类型：
                                        <span v-if="scope.row.goods_type === 1">自营</span>
                                        <span v-else-if="scope.row.goods_type === 2">淘客商品</span>
                                        <span v-else-if="scope.row.goods_type === 3">自营秒杀</span>
                                        <span v-else-if="scope.row.goods_type === 5">折扣</span>
                                        <span v-else>--</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="秒杀价"
                        width="140"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            ￥{{ scope.row.price }}起
                            <el-popover
                                placement="bottom"
                                width="603"
                                trigger="click"
                            >
                                <sku-detail-template
                                    :data="skuList"
                                    from-type="list"
                                />
                                <el-button
                                    type="text"
                                    slot="reference"
                                    @click="getSkuDetail(scope.row)"
                                >查看</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="学生价"
                        width="140"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            ￥{{ scope.row.goods_price }}起
                            <el-popover
                                placement="bottom"
                                width="603"
                                trigger="click"
                            >
                                <sku-detail-template
                                    :data="skuList"
                                    from-type="list"
                                />
                                <el-button
                                    type="text"
                                    slot="reference"
                                    @click="getSkuDetail(scope.row)"
                                >查看</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="原价"
                        show-overflow-tooltip
                        align="center"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            ￥{{ scope.row.goods_price_origin }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="排序"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.sort }}</span>
                            <el-divider direction="vertical"/>
                            <i
                                class="el-icon-edit"
                                style="cursor: pointer"
                                @click="handleSort(scope.row)"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="设置库存"
                        width="110"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.goods_num }}
                            <el-popover
                                placement="bottom"
                                width="603"
                                trigger="click"
                            >
                                <sku-detail-template
                                    :data="skuList"
                                    from-type="list"
                                />
                                <el-button
                                    type="text"
                                    slot="reference"
                                    @click="getSkuDetail(scope.row)"
                                >查看</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="剩余库存"
                        width="110"
                        align="center"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.goods_num - scope.row.sale_num }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="sale_num"
                        label="真实销量"
                        align="center"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="APP显示销量"
                        width="108"
                        align="center"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.sale_num + scope.row.sale_num_auto }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="view_count"
                        label="真实浏览量"
                        align="center"
                        width="110"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        label="企业主浏览量"
                        width="108"
                        align="center"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <span v-if=" scope.row.goods_type === 3 ">{{ scope.row.view_count_auto + scope.row.view_count }}</span>
                            <span v-if=" scope.row.goods_type === 2 ">--</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="原商品限购"
                        show-overflow-tooltip
                        align="center"
                        width="110"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.goods_buy_limit_count !== -1">{{ scope.row.goods_buy_limit_count }}件</span>
                            <span v-else>不限制</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="本场限购"
                        show-overflow-tooltip
                        align="center"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.buy_limit_count !== -1">{{ scope.row.buy_limit_count }}件</span>
                            <span v-else>不限制</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="秒杀状态"
                        show-overflow-tooltip
                        align="center"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.status === 1">未开始</span>
                            <span v-if="scope.row.status === 2">进行中</span>
                            <span v-if="scope.row.status === 3">已结束</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="left"
                        width="120"
                        fixed="right"
                    >
                        <template slot-scope="scope">
                            <div class="option-btn-group">
                                <el-button
                                    type="text"
                                    :disabled="scope.row.goods_type === 2 || scope.row.goods_type === 3"
                                    @click="handleEditGoods(scope.row.sale_no, 'edit', time_no)"
                                >
                                    编辑
                                </el-button>
                                <el-button
                                    type="text"
                                    :style="{color: '#F95B56'}"
                                    @click="handleDelete(scope.row)"
                                >
                                    移除
                                </el-button>
                                <el-button
                                    type="text"
                                    @click="handleSetSaleCount(scope.row, scope.row.goods_type)"
                                >
                                    销量自动增加
                                </el-button>
                                <el-button
                                    type="text"
                                    v-if="scope.row.goods_type === 3"
                                    @click="handleSetViewCount(scope.row)"
                                >
                                    浏览量自动增加
                                </el-button>
                                <el-button
                                    type="text"
                                    @click="setGoodsLimit(scope.row)"
                                >
                                    设定购买数量
                                </el-button>
                                <el-button
                                    type="text"
                                    @click="setSeckillLimit(scope.row)"
                                >
                                    本场限购数量
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!--商品选择弹窗-->
        <goods-select
            ref="goodsSelect"
            @change="handleRoute('seckillGoodsAddBatch', {
                goodsList: JSON.stringify($event),
                time_no
            })"
        />
        <!-- 销量自动增加 原来的代码 没动 2021/02/23 -->
        <el-dialog
            title="销量自动增加"
            width="700px"
            :visible.sync="dialogVisibleDeduction"
            :close-on-click-modal="false"
            @close="DeductionList = []"
        >
            <el-form
                :model="ruleFormDeduction"
                ref="ruleFormDeduction"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item
                    label="销量"
                    v-if="isTk"
                >
                    <el-input
                        v-model="tao_item_stock_num"
                        placeholder="请输入增加销量"
                        size="small"
                    />
                </el-form-item>
                <el-form-item
                    v-if="!isTk"
                >
                    <div
                        class="el-deduction-list"
                        v-for="(item,index) in DeductionList"
                        :key="index"
                    >
                        <el-input-number
                            v-model="ruleFormDeduction[index]"
                            :step="1"
                            step-strictly
                            :controls="false"
                            :min="0"
                            :max="item.product_stock"
                            size="small"
                        />
                        <div
                            v-for="(itm,idx) in item.spec_list"
                            :key="idx"
                            class="el-max-width"
                        >
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                :content="itm.spec_name + ':' +itm.spec_value + '/' + item.product_stock + '件'"
                            >
                                <span
                                    slot="reference"
                                    class="el-provide-text"
                                >
                                    {{ itm.spec_name }}:{{ itm.spec_value }} / {{ item.product_stock }}件
                                </span>
                            </el-popover>
                        </div>
                    </div>
                </el-form-item>
                <div class="dialog-footer">
                    <el-button
                        size="small"
                        style="width: 100px"
                        @click="dialogVisibleDeduction = false"
                    >
                        取消
                    </el-button>
                    <el-button
                        type="primary"
                        size="small"
                        style="width: 100px;margin-left: 20px"
                        @click="submitFormDeduction()"
                    >
                        保存
                    </el-button>
                </div>
            </el-form>
        </el-dialog>
        <!-- /销量自动增加 -->
    </div>
</template>

<script>
import GoodsSelect from '@/components/goods/goods-select';
import {createSeckillTimeDialog} from '@/components/seckill/create-seckill-time';
import {editSeckillTimeDialog} from '@/components/seckill/edit-seckill-time';
import {inputNumberDialog} from '@/components/seckill/input-number';
import {setViewCountDialog} from '@/components/seckill/set-view-count';
import SkuDetailTemplate from "@/components/seckill/sku-detail-template";

export default {
    data() {
        return {
            isInit: false,
            // 当前日期
            day_time: 0,
            // 当前秒杀时间
            time_no: '',
            tableData: [],
            tableLoading: false,
            // 日期列表
            day_list: [],
            // 秒杀时间列表
            time_list: [],
            // 用于计算时间条左右滑动
            nowIndex: 0,
            // 设置自动增长销量相关
            dialogVisibleDeduction: false,
            ruleFormDeduction: {},
            DeductionList: [],
            isTk: false,
            tao_item_stock_num: '',
            skuList: []
        };
    },
    components: {
        SkuDetailTemplate,
        GoodsSelect
    },
    mounted() {
        let today = Number(this.$moment().startOf('day').format('X'));

        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '活动管理'}, {title: '限时秒杀'}, {title: '活动排期'}]);
        this.authResult = this.$route.meta.authResult;
        this.getDayTimeList().then(day_list => {
            this.setDayNowIndex(day_list, today);
        });
        setTimeout(() => {
            this.isInit = true;
        }, 400);
    },
    watch: {},
    filters: {},
    methods: {

        /**
         * 获取排期日期列表
         */
        getDayTimeList() {
            let today = Number(this.$moment().startOf('day').format('X'));

            return new Promise((resolve, reject) => {
                this.$post('/student/shop_goods_flash_sale%5Cget_day_list', {
                    start_time: Number(this.$moment().subtract(15, 'day').startOf('day').format('X')),
                    end_time: Number(this.$moment().add(15, 'day').startOf('day').format('X'))
                }, resp => {
                    if (resp.code === 1) {
                        let day_list = resp.data.list;

                        // 处理状态显示
                        day_list.forEach(item => {
                            if (item.day_time === today) {
                                item.class_name = 'danger';
                            } else if (item.day_time > today) {
                                item.class_name = 'success';
                            } else {
                                item.class_name = 'normal';
                            }
                        });
                        this.day_list = day_list;
                        resolve(day_list);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * 设置当前日期以及详情返回回显
         */
        setDayNowIndex(day_list, today) {
            // 详情页面返回回显
            this.nowIndex = day_list.findIndex(item => {
                if(sessionStorage.getItem('SECKILL_DAY_TIME')) {
                    if(item.day_time === Number(sessionStorage.getItem('SECKILL_DAY_TIME'))) {
                        this.day_time = item.day_time;
                        sessionStorage.removeItem('SECKILL_DAY_TIME');
                        return item;
                    }
                } else if (item.day_time === today) {
                    this.day_time = item.day_time;
                    return item;
                }
            });
            // 调整默认时间条滚动位置
            this.$refs.tabs.style.transform = `translateX(-${(this.nowIndex - 3) * 139}px)`;
            // 获取秒杀时间点
            this.getScekillTimeList().then(() => {
                if(sessionStorage.getItem('SECKILL_TIME_NO')) {
                    this.time_no = sessionStorage.getItem('SECKILL_TIME_NO');
                    sessionStorage.removeItem('SECKILL_TIME_NO');
                } else {
                    this.time_no = this.time_list.length ? this.time_list[0].time_no : '';
                }
                this.getTableData();
            });
        },

        /**
         * 获取秒杀时间点列表
         */
        getScekillTimeList() {
            return new Promise((resolve, reject) => {
                this.$post('/student/shop_goods_flash_sale%5Cget_simple_time_list', {
                    day_time: this.day_time
                }, resp => {
                    if (resp.code === 1) {
                        this.time_list = resp.data.list.map(item => {
                            return {
                                label: this.$moment(item.start_time * 1000).format('HH:mm') + ' - ' + this.$moment(item.end_time * 1000).format('HH:mm'),
                                time_no: item.time_no,
                                show_close: false
                            };
                        });
                        resolve(resp.data.list);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * 获取表格数据
         */
        getTableData() {
            this.tableLoading = true;
            this.$post('/student/shop_goods_flash_sale%5Cget_list', {
                day_time: this.day_time,
                time_no: this.time_no
            }, resp => {
                if (resp.code === 1) {
                    this.tableData = resp.data.list;
                    this.tableData = resp.data.time_goods_map[this.time_no];
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * 切换日期
         * @param item
         * @param index
         */
        handleChangeDay(item, index) {
            this.nowIndex = index;
            this.day_time = item.day_time;
            this.getScekillTimeList().then(() => {
                this.time_no = this.time_list.length ? this.time_list[0].time_no : '';
                this.getTableData();
            });
        },

        /**
         * 切换秒杀时间
         * @param item
         */
        handleChangeTime(item) {
            if(this.time_no === item.time_no) {
                return;
            }
            this.time_no = item.time_no;
            this.getTableData();
        },

        /**
         * 创建秒杀时间
         */
        async handleAddSeckillTime() {
            if (!this.authResult.auth_add_time) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            let result = await createSeckillTimeDialog();

            if(result) {
                await this.getDayTimeList();
                await this.getScekillTimeList();
                if (!this.time_no) {
                    this.time_no = this.time_list[0].time_no;
                    this.getTableData();
                }
            }
        },

        /**
         * 编辑秒杀时间
         * @param item
         */
        async handleEditTime(item) {
            if (!this.authResult.auth_edit_time) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            let result = await editSeckillTimeDialog({
                dayTime: this.day_time,
                timeNo: item.time_no
            });

            if(result) await this.getScekillTimeList();
        },

        /**
         * 删除秒杀时间
         * @param item
         */
        handleDeleteTime(item) {
            if (!this.authResult.auth_delete_time) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$zdConfirm('是否要删除当前排期？', '温馨提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_flash_sale%5Cdelete_time', {
                    time_no: item.time_no
                }, resp => {
                    if (resp.code === 1) {
                        this.getScekillTimeList().then(() => {
                            this.time_no = this.time_list.length ? this.time_list[0].time_no : '';
                            this.getTableData();
                            if(this.time_list.length === 0) {
                                this.getDayTimeList();
                            }
                        });
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '删除成功'
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }).catch(() => {});
        },

        /**
         * 点击时间条左右移动
         * @param type prev next
         */
        handleDayTransform(type) {
            let translateX = Number(this.$refs.tabs.style.transform.split('px)')[0].substring(11));
            let max = -(this.day_list.length * 139 - this.$refs.tabsWrapper.clientWidth);

            if (type === 'prev') {
                if (translateX < 0 && translateX < -600) {
                    this.$refs.tabs.style.transform = `translateX(${translateX + 600}px)`;
                } else {
                    this.$refs.tabs.style.transform = `translateX(${0}px)`;
                }
            }

            if (type === 'next') {
                if (translateX > max && (translateX - 600) > max) {
                    this.$refs.tabs.style.transform = `translateX(${translateX - 600}px)`;
                } else {
                    this.$refs.tabs.style.transform = `translateX(${max}px)`;
                }
            }
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
            sessionStorage.setItem('SECKILL_DAY_TIME', this.day_time);
            sessionStorage.setItem('SECKILL_TIME_NO', this.time_no);
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 添加商品
         * @param no
         * @param type
         * @param time_no
         * @returns {boolean}
         */
        handleEditGoods(no = '', type, time_no = '') {
            if (!this.authResult.auth_add_goods) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.handleRoute('seckillGoodsEdit', {
                no,
                type,
                time_no
            });
        },

        /**
         * 排序
         * @param row
         */
        handleSort(row) {
            this.$prompt('', '排序', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPlaceholder: '请输入排序号',
                inputErrorMessage: '请输入正整数',
                inputValue: row.sort,
                closeOnClickModal: false,
            }).then(({value}) => {
                this.$post('/student/shop_goods_flash_sale%5Cset_sort', {
                    sale_no: row.sale_no,
                    sort: value
                }, resp => {
                    if (resp.code === 1) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '修改成功'
                        });
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            });
        },

        /**
         * 移除商品
         * @param row
         */
        handleDelete(row) {
            if (!this.authResult.auth_delete_goods) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$zdConfirm('此操作将移除该商品, 是否继续？', '温馨提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_flash_sale%5Cdelete', {
                    sale_no: row.sale_no
                }, resp => {
                    if (resp.code === 1) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '删除成功'
                        });
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }).catch(() => {});
        },

        /**
         * 设置商品限购
         * @param row
         */
        async setGoodsLimit(row) {
            let result = await inputNumberDialog({
                title: '设定购买数量',
                defaultValue: row.goods_buy_limit_count
            });

            if(result) {
                this.$post('/student/shop_goods%5Cset_buy_limit_count', {
                    goods_no: row.goods_no,
                    buy_limit_count: result
                }, resp => {
                    if (resp.code === 1) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '操作成功'
                        });
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }
        },

        /**
         * 设置本场限购
         * @param row
         */
        async setSeckillLimit(row) {
            let result = await inputNumberDialog({
                title: '设定本场限购数量',
                defaultValue: row.buy_limit_count
            });

            if(result) {
                this.$post('/student/shop_goods_flash_sale%5Cset_buy_limit_count', {
                    sale_no: row.sale_no,
                    buy_limit_count: result
                }, resp => {
                    if (resp.code === 1) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '操作成功'
                        });
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }
        },

        /**
         * 设置自动浏览量增长
         * @param row
         */
        async handleSetViewCount(row) {
            let result = await setViewCountDialog({
                saleNo: row.sale_no,
                defaultNum: row.view_auto_config.num,
                defaultMinute: row.view_auto_config.second / 60
            });

            if(result) this.getTableData();
        },

        /**
         * 设置自动销量增长
         * @param row
         * @param goods_type
         */
        handleSetSaleCount(row, goods_type) {
            this.isTk = goods_type !== 3;
            this.tao_item_stock_num = row.sale_auto_config['tao_item_stock_num'];

            let specList = row.sale_auto_config.product;

            this.sale_no = row.sale_no;
            this.$post('/student/shop_goods%5Cget_product', {
                goods_no: row.goods_no
            }, resp => {
                if (resp.code == 1) {
                    this.DeductionList = resp.data.goods_product_list;
                    if (JSON.stringify(specList) !== '[]') { //需要回填数据
                        this.DeductionList.map((item, index) => {
                            if (JSON.stringify(item.spec_list) == JSON.stringify(specList[index].specs)) {
                                this.ruleFormDeduction[Number(index)] = specList[index].num;
                            }
                        });
                        this.ruleFormDeduction = JSON.parse(JSON.stringify(this.ruleFormDeduction));
                    } else {
                        this.DeductionList.map((item, index) => {
                            this.ruleFormDeduction[index] = 0;
                        });
                        this.ruleFormDeduction = JSON.parse(JSON.stringify(this.ruleFormDeduction));
                        return false;
                    }
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
            this.dialogVisibleDeduction = !this.dialogVisibleDeduction;
        },

        /**
         * 保存库存扣除量
         */
        submitFormDeduction() {
            let arr = [];
            let value = this.ruleFormDeduction;

            /* 表单项为空时不允许提交 */
            for (let i in value) {
                if (value[i] === '') {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: '表单选项不可以为空,不扣除时请填写0'
                    });
                    return;
                }
            }
            /* 表单项为空时不允许提交 */

            this.DeductionList.map((item, index) => {
                arr.push({
                    specs: item.spec_list,
                    num: this.ruleFormDeduction[index]
                });
                return;
            });

            this.$post('/student/shop_goods_flash_sale%5Cset_sale_auto', {
                sale_no: this.sale_no,
                status: 1,
                product_config: JSON.stringify(arr),
                tao_item_stock_num: this.isTk ? this.tao_item_stock_num : ''
            }, resp => {
                if (resp.code === 1) {
                    this.getTableData();
                    this.dialogVisibleDeduction = !this.dialogVisibleDeduction;
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: '操作成功'
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 获取sku详情
         * @param row
         */
        getSkuDetail(row) {
            this.$post('/student/shop_goods_flash_sale%5Cget_sale_product_list', {
                sale_no: row.sale_no,
            }, resp => {
                if (resp.code === 1) {
                    this.skuList = resp.data.list;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;

        &::-webkit-scrollbar {
            width: 4px;
        }

        // 头部
        .header-wrapper {
            flex-shrink: 0;
            height: 64px;
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            user-select: none;

            .day-view {
                height: 100%;
                display: flex;
                width: calc(100% - 198px);
                align-items: center;
                font-size: 16px;
                color: #909399;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;

                .icon-view {
                    width: 44px;
                    height: 100%;
                    background: #FFFFFF;
                    flex-shrink: 0;
                    position: relative;

                    .el-icon-arrow-right, .el-icon-arrow-left {
                        font-weight: 600;
                    }

                    .icon {
                        position: absolute;
                        width: 44px;
                        height: 100%;
                        background: #FFFFFF;
                        left: 0;
                        top: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        z-index: 1;
                    }

                    .shadow {
                        width: 10px;
                        height: 38px;
                        background: rgba(55, 123, 255, 0.32);
                        filter: blur(7px);
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }

                    &:hover {
                        color: #20A0FF;
                        transition: color .2s;
                    }

                    &.icon-left {
                        .shadow {
                            right: 0;
                        }
                    }

                    &.icon-right {
                        .shadow {
                            left: 0;
                        }
                    }
                }

                .scroll-view {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    border-bottom: 1px solid #F0F2F5;

                    .tabs-view {
                        height: 100%;
                        display: flex;
                        align-items: center;
                        position: relative;
                        &.init {
                            transition: transform .3s;
                        }
                        .day-item {
                            width: 139px;
                            height: 100%;
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            position: relative;

                            &__inner {
                                width: 100%;
                                height: 22px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-right: 1px solid #F0F2F5;
                            }

                            &:last-of-type {
                                &__inner {
                                    border-right: 0;
                                }
                            }

                            .status-dot {
                                width: 6px;
                                height: 6px;
                                border-radius: 50%;
                                position: absolute;
                                left: 7px;
                                top: 7px;

                                &.success {
                                    background: #4CD964;
                                }

                                &.danger {
                                    background: #FF3030;
                                }

                                &.normal {
                                    background: #C2C2C2;
                                }
                            }
                        }

                        .scroll-bar {
                            width: 138px;
                            height: 2px;
                            background: #20A0FF;
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            //transition: all .3s cubic-bezier(.645,.045,.355,1);
                        }
                    }
                }
            }

            .header-right {
                height: 100%;
                flex-shrink: 0;
                width: 198px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .time-wrapper {
            padding: 0 32px;
            display: flex;
            flex-wrap: wrap;
            .time-title {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                height: 36px;
                display: flex;
                align-items: center;
            }
            .btn-group {
                margin-bottom: 16px;
            }
            .time-item {
                padding: 0 14px;
                height: 36px;
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #F0F2F5;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 16px;
                margin-bottom: 16px;
                user-select: none;
                cursor: pointer;
                position: relative;
                &.active {
                    background: #F7FBFF;
                    border: 1px solid #20A0FF;
                    color: #20A0FF;
                    .delete-icon {
                        color: #20A0FF;
                    }
                    .edit-icon {
                        color: #20A0FF;
                    }
                }
                .delete-icon {
                    position: absolute;
                    font-size: 18px;
                    font-weight: 600;
                    top: -9px;
                    right: -9px;
                    color: #999999;
                    background: #fff;
                }
                .edit-icon {
                    margin-left: 5px;
                    color: #ccc;
                }
            }
        }

        // 表格
        /deep/ .table-wrapper {
            padding: 0 32px;
            flex: 1;
            height: 0;

            .cell-title {
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-bottom: 12px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 2;
            }

            .cell-content {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 3;
            }

            .cell-tips {
                color: #999;
            }
        }

        /deep/ .data-table {
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            // 操作按钮
            .option-btn-group {
                .el-button {
                    margin-left: 0;
                    margin-right: 10px;
                    padding: 6px 0;
                }
            }
        }

        /deep/ .status-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;

            .status-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;

                &.success {
                    background: #4CD964;
                }

                &.danger {
                    background: #FF3030;
                }

                &.warning {
                    background: #FFA72D;
                }

                &.normal {
                    background: #A6A6A6;
                }
            }
        }
        .sec-goods-info {
            height: 70px;
            display: flex;
            .sec-goods-cover {
                width: 70px;
                height: 70px;
                margin-right: 16px;
                flex-shrink: 0;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .sec-goods-content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .sec-goods-title {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display:-webkit-box;
                    -webkit-line-clamp:2;
                    /*! autoprefixer: off */
                    -webkit-box-orient: vertical;
                }
                .goods-type {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
            }
        }

        /* 分页 */

        .pagination-wrapper {
            padding: 12px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-pagination {
                background-color: transparent;
            }
        }

        /deep/ .el-table {
            th {
                background: #f2f2f2 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Medium, PingFang SC !important;
                font-weight: 500 !important;
                color: #333333 !important;
                height: 44px !important;
            }
        }
    }
}
/deep/ .el-dialog__header {
    padding-top: 10px;
    box-shadow:0 1px 0 0 rgba(233,233,233,1);
    display: flex;
    align-items: center;
    background: #FAFAFA;
    border-radius: 4px 4px 0 0;
    .el-dialog__title {
        font-weight: 500;
        color: #333;
        font-size: 14px;
    }
    .el-icon-close:before {
        color: rgb(194,194,194);
        font-size: 17px;
        font-weight: bold;
    }
    .el-dialog__headerbtn {
        top: 14px;
    }
}
/deep/ .el-dialog__body {
    padding: 24px 32px;
}

.el-deduction-list {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;

    .el-deduction-left {
        min-width: 30px;
    }

    .el-deduction-ipt {
        width: 100px;
    }

    .el-max-width {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 5px;
    }
}
/deep/ .el-input-number .el-input__inner {
    text-align: left;
}
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
